<template>
  <el-menu-item
    v-if="item?.isLeaf"
    v-acl="{ points: [acl.getMenuAcl('get', acl.getRouter(item), true)] }"
    :index="item.id"
    :class="{ 'submenu-title-noDropdown': !isNest }"
    :style="{ display: 'flex', alignItems: 'center' }"
    :disabled="item.forbidden"
    @click="handleSelect(item)"
  >
    <div
      v-if="toRaw(item.icon)"
      class="sub-menu-icon"
      :style="getsubMenuIconStyle"
    >
      <component :is="useRenderIcon(toRaw(item.icon))" />
    </div>
    <template #title>
      <div class="div_attr">
        <span>
          {{ item.text }}
        </span>
      </div>
    </template>
  </el-menu-item>

  <el-sub-menu
    v-else-if="menu.isHasChildren(item)"
    ref="subMenu"
    class="el-sub-menu"
    v-bind="expandCloseIcon"
    :index="item?.id"
    :disabled="item.forbidden"
  >
    <template #title>
      <div
        v-if="toRaw(item?.icon)"
        :style="getsubMenuIconStyle"
        class="sub-menu-icon"
      >
        <component :is="useRenderIcon(toRaw(item?.icon))" />
      </div>
      <span v-if="app.isHorizontal"> {{ item?.text }} </span>
      <div :style="getSubMenuDivStyle(item)" v-if="app.getSidebar.opened">
        <el-tooltip
          v-if="!app.isHorizontal"
          placement="top"
          :effect="'dark'"
          :offset="-10"
          disabled
        >
          <template #content>
            {{ item?.text }}
          </template>
          <span ref="menuTextRef" :style="getSubTextStyle">
            {{ overflowSlice(item!.text) }}
          </span>
        </el-tooltip>
      </div>
    </template>
    <Item
      v-for="child in item?.children || []"
      :key="child.id"
      :item="child"
      :is-nest="true"
      class="nest-menu"
    />
  </el-sub-menu>
</template>

<script setup lang="ts">
import { useRenderIcon } from "@/components/icon/src/hooks";
import { ref, toRaw, PropType, computed, CSSProperties } from "vue";
import Item from "./item.vue";
import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
import ArrowRight from "@iconify-icons/ep/arrow-right-bold";
import { IMenu } from "@/core/pinia/interface";
import { useAppHooks } from "@/core/pinia/store/app.store";
import { useMenuHooks } from "@/core/pinia/store/menu.store";
import { useAclHooks } from "@/core/pinia/store/acl.store";
import { useRouter } from "vue-router";
const acl = useAclHooks();
const app = useAppHooks();
const menu = useMenuHooks();
const subMenu = ref<any>(null);
defineProps({
  item: {
    type: Object as PropType<IMenu>
  },
  isNest: {
    type: Boolean,
    default: false
  }
});
const router = useRouter();
const handleSelect = (item: IMenu) => {
  if (item.moda !== "LINK") {
    useMenuHooks().setCacheTags(item);
    router.push({
      path: item.router
    });
  } else {
    window.open(item.link, "_blank");
  }
};
const getsubMenuIconStyle = computed((): CSSProperties => {
  return {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    margin: app.isHorizontal
      ? "0 5px 0 0"
      : !app.getSidebar.opened
      ? "0 auto"
      : "0 5px 0 0"
  };
});

const getSubTextStyle = computed((): CSSProperties => {
  if (!app.getSidebar.opened) {
    return {
      width: "210px",
      display: "inline-block",
      overflow: "hidden",
      textOverflow: "ellipsis"
    };
  } else {
    return {
      width: ""
    };
  }
});

const getSubMenuDivStyle = computed((): any => {
  return (item: IMenu) => {
    return app.getSidebar.opened
      ? {
          width: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          overflow: "hidden"
        }
      : {
          width: "100%",
          textAlign: item?.parentId === null ? "center" : ""
        };
  };
});

const expandCloseIcon = computed(() => {
  return {
    "expand-close-icon": useRenderIcon(EpArrowDown),
    "expand-open-icon": useRenderIcon(ArrowUp),
    "collapse-close-icon": useRenderIcon(ArrowRight),
    "collapse-open-icon": useRenderIcon(ArrowLeft)
  };
});

// 存储菜单文本dom元素
const menuTextRef = ref(null);

// 左侧菜单折叠后，当菜单没有图标时只显示第一个文字并加上省略号
function overflowSlice(text: string) {
  const newText =
    (text?.length > 1 ? text.toString().slice(0, 1) : text) + "...";
  if (app.getSidebar.opened) {
    return text;
  }
  return newText;
}
</script>
<style lang="scss" scoped>
.div_attr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
</style>
